<template>
  <div id="vipGoodsItems">
    <!-- 商品内容列表 -->
    <section class="r_list" ref="r_list">
      <div>
        <ul>
          <li
            class="list "
            v-for="(item,index) in vipCateDetail"
            :key="index"
          >
            <div class="list_item flex">
              <p>
                <img :src="item.small_image" alt="">
              </p>
              <div>
                <p class="name">{{item.product_name}}</p>
                <p class="des">{{item.spec}}</p>
                <p class="originPrice">{{item.origin_price}}</p>
                <p class="price">{{item.price}}
                  <van-tag plain
                           mark
                           color="#5fa85f">开通绿卡</van-tag>
                </p>
                <div class="iconCartWrapper">
                  <svg-icon iconClass="cart_disable" className="icon-cart" />
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="bottomTip">更多特权敬请期待...</div>
      </div>
    </section>
  </div>
</template>

<script type="text/javascript">
export default {
  name: 'VipGoodsItems',
  props: {
    vipCateDetail: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss" scoped>
#vipGoodsItems {
  .r_list {
    overflow: hidden;
    // 防止抖动
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    padding-bottom: px2rem(52);
    .productCategoryTitle {
      display: inline-block;
      padding: px2rem(17.5);
      border-left: px2rem(3) solid $text-color-line;
      @include setWH(100%, px2rem(5));
      @include setFontColor(px2rem(13), rgb(147, 153, 159));
      background-color: $bg-color-page;
      padding-left: px2rem(5);
    }
    .flex {
      @include flexType(center);
    }
    .list {
      padding: px2rem(6) px2rem(6) 0 px2rem(6);
      img {
        @include setWH(px2rem(71), px2rem(71));
        border-radius: px2rem(0.7);
      }
      .list_item {
        justify-content: flex-start;
        border-bottom: 1px solid rgba(7, 17, 27, 0.1);
        padding-bottom: px2rem(17.5);
        position: relative;
        & > div {
          margin-left: px2rem(3);
          .name {
            @include setFontColor( px2rem(15), rgb(7, 17, 27));
            margin-bottom: px2rem(3);
          }
          .des,
          .sale {
            padding: px2rem(3);
            line-height: px2rem(14);
            @include setFontColor(px2rem(11), rgb(147, 153, 159));
            margin-bottom: px2rem(11);
          }
          .sale {
            margin-bottom: 0;
            span {
              margin-left: px2rem(4);
            }
          }
          .originPrice {
            margin-top: px2rem(9);
            @include setFontColor(px2rem(12), #8f8f8f);
          }
          .price {
            @include setFontColor(px2rem(14), $theme-clor-green);
            padding-top: px2rem(5);
          }
          .add {
            position: absolute;
            right: 0;
            bottom: px2rem(5);
          }
          .iconCartWrapper {
            position: absolute;
            top: px2rem(60);
            right: px2rem(10);
            width: px2rem(33);
          }
          .icon-cart {
            @include setWH( px2rem(35),  px2rem(35));
          }
        }
      }
    }
    .bottomTip {
      padding-top: px2rem(14);
      @include setFontColor(px2rem(14), $text-color-pl);
      text-align: center;
    }
  }
}
</style>

